<!--
 * @Descripttion: number编辑组件
 * @version: V1.0
 * @Author: GW
 * @Date: 2021-09-09 13:59:48
 * @LastEditors: GW
 * @LastEditTime: 2021-09-15 11:41:55
-->
<template>
    <section class="edit-wrapper">
        <p>标题</p>
        <a-input v-model="data.title" maxLength="16"></a-input>
        <a-divider></a-divider>
        <!-- <a-checkbox v-model="data.onOff">是否显示</a-checkbox>
        <a-divider></a-divider> -->
        <a-checkbox v-model="data.onFill">是否必填</a-checkbox>
        <a-divider></a-divider>
        <p>限定数字范围</p>
        <a-input-group compact>
            <a-input-number v-model="min" style=" width: 100px; text-align: center" placeholder="最小值" @blur="handleChange" />
            <a-input style=" width: 30px;height:28px; border-left: 0; pointer-events: none; backgroundColor: #fff" placeholder="~" disabled />
            <a-input-number v-model="max" style="width: 100px; text-align: center; border-left: 0" placeholder="最大值" @blur="handleChange" />
        </a-input-group>
    </section>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {}
        },
    },
    data () {
        return {
            min: null,//最小值
            max: null,//最大值
        }
    },
    methods: {
        handleChange () {
            if (this.min && this.max) {
                if (this.min > this.max) {
                    this.$message.warning('最小值不能大于最大值');
                    this.min = null;
                    return;
                } else {
                    this.data.scope = [this.min, this.max];
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .edit-wrapper {
        padding: 10px 10px 28px;
        .input-number {
            width: 100%;
        }
        .ant-input-number {
            text-align: center !important;
        }
    }
</style>